<script setup>
import { ref } from 'vue'
import { artGetChannelsService } from '@/api/article'

// defineProps({
//   modelValue: {
//     type: [Number, String]
//   }
// })
// const emit = defineEmits(['update:modelValue'])

// 以上的 defineProps 和 defineEmits 可以用 defineModel 代替
// 使用 defineModel() 去替代 defineProps() 接收双向绑定的数据
// 既可以直接当作 props 用
// 又可以直接修改，不需要使用 emit 这些东西
// 注：依然是单向数据流，只是通过 defineModel 简化了代码
const modelValue = defineModel()

const channelList = ref([])
const getChannelList = async () => {
  const res = await artGetChannelsService()
  channelList.value = res.data.data
  // console.log(channelList.value)
}

getChannelList()


</script>

<template>
  <!-- el-select 默认宽度为 100% ，需要手动设置宽度 -->
  <!-- 这是 defineProps 和 defineEmits 的写法 -->
  <!-- <el-select
  :modelValue="modelValue"
  @update:modelValue="emit('update:modelValue', $event)"
  style="width: 220px"> -->

  <!--
  这是 defineModel 的写法
  在 vue3.3+ 中，子组件内部使用 defineModel() ，可直接使用 v-model 绑定数据
  -->
  <el-select
  v-model="modelValue"
  style="width: 220px">
    <!-- el-option 中 label 是展示给用户看的，value 是提交到后台的 -->
    <el-option v-for="item in channelList" :key="item.id" :label="item.cate_name" :value="item.id"></el-option>
  </el-select>
</template>